<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新冠肺炎疫情信息平台</title>
<!-- 引入外部的标签css  -->
<link rel="stylesheet" href="css/epidemic.css">
</head>
<body>
	<!-- 1、title -->
	<div id="title">
		<span class="china_title">全国疫情信息</span>&nbsp;&nbsp;<a href="#"
			class="world_title">全球疫情信息</a>
	</div>
	<!-- 2、时间：当前系统的时间 -->
	<div id="time">2021年01月27日 星期三 16:48:35</div>
	<!-- 3、left1 -->
	<div id="left1">left-1</div>
	<!-- 4、left2 -->
	<div id="left2">left-2</div>
	<!-- 5、mid1 -->
	<div id="mid1">
		<div class="num">
			<h1>8991</h1>
		</div>
		<div class="num">
			<h1>101232</h1>
		</div>
		<div class="num">
			<h1>88888</h1>
		</div>
		<div class="num">
			<h1>17690</h1>
		</div>
		<div class="txt">
			<h2>现存确诊</h2>
		</div>
		<div class="txt">
			<h2>累计确诊</h2>
		</div>
		<div class="txt">
			<h2>治愈</h2>
		</div>
		<div class="txt">
			<h2>死亡</h2>
		</div>
	</div>
	<!-- 6、mid2 -->
	<div id="mid2">
		<div id="china_map"></div>
	</div>
	<!-- 7、right1 -->
	<div id="right1">right-1</div>
	<!-- 8、right2 -->
	<div id="right2">right-2</div>
	<!-- 9、footer -->
	<footer>
		By bjzhangjian&nbsp;&nbsp;&nbsp; 官网：<a href="http://www.tedu.cn"
			target="_blank">达内官网</a>
	</footer>
</body>
<!-- 1、引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<!-- 注意引入echarts-wordcloud.min.js -->
<script src="js/echarts-wordcloud.min.js"></script>

<script src="js/dark.js"></script>
<!-- 引入china.js -->
<script src="js/china.js"></script>

<!-- right1 -->
<script type="text/javascript">
        /*  3、基于准备好的dom，初始化echarts实例 */
        var myChart = echarts.init(document.getElementById('right1'),'dark');

        // 4、指定图表的配置项和数据
        var option = {
            title: {/* 主标题文本 */
                text: '全国确诊省市TOP5',
                left:'left',
                textStyle:{
                	color:'white',
                	fontWeight:'bolder',
                	fontSize: 18
                }
            },
            color:['#3398DB'],
            tooltip: {/* 提示框组件。*/
            	 trigger : 'axis',
            	 axisPointer:{
            		 type : 'shadow'
            	 }
            },
            grid:{
            	left:'3%',
            	right:'4%',
            	bottom:'3%',
            	containLabel:true
            },
            xAxis: [
            	{
            	type:'category',
                data: ["湖北省","香港","广东省","上海市","黑龙江省"],
            	axisTick:{
            		 alignWithLabel:true
            	},
            	axisLabel:{
            		show:true,
            		color:'white',
            		fontSize:10
            	}
            }
        ],
            yAxis: {},
            series: [{
                name: '累计确诊',
                type: 'bar',
                data: [68150, 10222, 2115, 1660, 1476]
            }]
        };

        // 5、使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
<!-- left1 折线图  -->
<script>
/*  3、基于准备好的dom，初始化echarts实例 */
var myChart = echarts.init(document.getElementById('left1'),'dark');
option = {
	    /* title: {
	        text: '折线图堆叠'
	    }, */
	    tooltip: {
	        trigger: 'axis'
	    },
	    legend: {
	        data: ['累计确诊', '现存确诊', '治愈', '死亡']
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    toolbox: {
	        feature: {
	            saveAsImage: {}
	        }
	    },
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: ['1-23', '3-16', '5-23', '8-19', '10-12', '11-11', '12-25']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [
	        {
	            name: '累计确诊',
	            type: 'line',
	            /* stack: '总量', */
	            data: [120, 132, 101, 134, 90, 230, 210]
	        },
	        {
	            name: '现存确诊',
	            type: 'line',
	           /*  stack: '总量', */
	            data: [220, 182, 191, 234, 290, 330, 310]
	        },
	        {
	            name: '治愈',
	            type: 'line',
	          /*   stack: '总量', */
	            data: [150, 232, 201, 154, 190, 330, 410]
	        },
	        {
	            name: '死亡',
	            type: 'line',
	           /*  stack: '总量', */
	            data: [320, 332, 301, 334, 390, 330, 320]
	        },
	        
	    ]
	};	
myChart.setOption(option);
</script>
<!-- left2 -->
<script>
/*  3、基于准备好的dom，初始化echarts实例 */
var myChart = echarts.init(document.getElementById('left2'),'dark');
	
option = {
	    title: {
	        text: '现存确诊',
	        subtext: '丁香数据',
	        left: 'center'
	    },
	    tooltip: {
	        trigger: 'item'
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	    },
	    series: [
	        {
	            name: '现存确诊',
	            type: 'pie',
	            radius: '50%',
	            data: [
	                {value: 1048, name: '河北省'},
	                {value: 735, name: '黑龙江省'},
	                {value: 580, name: '北京市'},
	                {value: 484, name: '山西省'},
	                {value: 300, name: '上海市'}
	            ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};
	
//5、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
	
	
</script>

<!-- right2 -->
<script>
var myChart = echarts.init(document.getElementById('right2'),'dark');

option = {
	title:{
		text:'疫情热搜',
		x:'left',
		textStyle:{
			color:'white'
		}
	},
	tooltip:{
		show:true
	},
    series: [{
        type: 'wordCloud',/* 绘制词云 */
        shape: 'circle',
		/* //一个轮廓图像，白色区域将被排除在绘制文本之外。
		//形状选项将继续应用于云的形状增长。 */
       /*  maskImage: maskImage, */
		/* //下面的左/顶/宽/高/右/底用于定位字云
			//默认放置在中心，有75% x 80%的大小。 */
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
		/* //数据中的值将被映射到的文本大小范围。
			//默认最小为12px，最大为60px。 */
        sizeRange: [12, 60],
       /* 文本将在范围[- 90,90]中被旋转步骤45随机旋转 */
        rotationRange: [-90, 90],
        rotationStep: 45,
      //网格大小越大，字与字之间的距离越大。
        gridSize: 1,
      //设置为true允许部分文字在画布外绘制。
      //允许文字大于画布的大小被绘制   
        drawOutOfBound: false,
      //如果执行布局动画。
      //注意当有很多单词时禁用它将导致UI阻塞。 
        layoutAnimation: true,
        // Global text style
        textStyle: {
        	normal:{
		            fontFamily: '幼圆',
		            fontWeight: 'bold',
		            // Color can be a callback function or a color string
		            color: function () {
		                // Random color
		                return 'rgb(' + [
		                    Math.round(Math.random() * 255),
		                    Math.round(Math.random() * 255),
		                    Math.round(Math.random() * 255)
		                ].join(',') + ')';
		            }
        		}
	        },
	        emphasis: {/* 文本高亮 */
	            focus: 'self',
	
	            textStyle: {
	                shadowBlur: 10,
	                shadowColor: '#333'
	            }
	        },
	
	        // Data is an array. Each array item must have name and value property.
	        data: [{
	            name: '张建老师',
	            value: 666,
	        },
	        {
	            name: '高某某',
	            value: 266,
	        },
	        {
	            name: '李某某',
	            value: 166,
	        },
	        {
	            name: '周璐',
	            value: 466,
	        },
	        {
	            name: '达内教育',
	            value: 1866,
	            // Style of single text
	            textStyle: {
	            }
	        },
	        {
	            name: '山西农业大学',
	            value: 866,
	           
	        },
	        {
	            name: '软件学院',
	            value: 366,
	            
	        }]
    }]
};
    
//5、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

<!-- mid2 -->
<script>
var myChart = echarts.init(document.getElementById('mid2'),'dark');

data = [{
	'name':'湖北','value':85413
},{
	'name':'上海','value':8887
},
{
	'name':'山西','value':987
},
{
	'name':'河北','value':1875
},
{
	'name':'黑龙江','value':2345
},
{
	'name':'河南','value':5436
},
{
	'name':'新疆','value':123
},
	
	];
var option = {
		title:{
			text:'中国疫情图',
			left:'center'	
		},
		tooltip:{
			trigger:'item'
		},
		visualMap: { // 左侧小导航图标
	        show: true,
	        x: 'left',
	        y: 'bottom',
	        textStyle: {
	            fontSize: 8,
	            color:'white'
	        },
	        splitList: [{ start: 1,end: 9 },
	            {start: 10, end: 99 }, 
				{ start: 100, end: 999 },
	            {  start: 1000, end: 9999 },
	            { start: 10000 }],
	        color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
	    },
	    series: [{
	        name: '累计确诊人数',
	        type: 'map',
	        mapType: 'china',
	        roam: false, // 禁用拖动和缩放
	        itemStyle: { // 图形样式
	            normal: {
	                borderWidth: .5, //区域边框宽度
	                borderColor: '#009fe8', //区域边框颜色
	                areaColor: "#ffefd5", //区域颜色
	            },
	            emphasis: { // 鼠标滑过地图高亮的相关设置
	                borderWidth: .5,
	                borderColor: '#4b0082',
	                areaColor: "#fff",
	            }
	        },
	        label: { // 图形上的文本标签
	            normal: {
	                show: true, //省份名称
	                fontSize: 8,
	            },
	            emphasis: {
	                show: true,
	                fontSize: 8,
	            }
	        },
	        data:data
	    }]
};

//5、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

</script>


</html>